<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>选择器</title>
</head>
<body>

    <div class="box1" id="box2">
        我是div
    </div>

    <span>1</span>
    <span>2</span>
    <span>3</span>
    <span>4</span>
    <span>5</span>

    <script>
       //通过类名来选择
       var divEl1 = document.querySelector(".box1");
       console.log(divEl1);

       //通过属性值来选择
       var divEl2 = document.querySelector("#box2");
       console.log(divEl2);

       var spanEls = document.querySelectorAll("span");
       for(var i = 0;i<spanEls.length;i++)
       {
         console.log(spanEls[i]);
       }
       
    </script>
    
</body>
</html>